<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模板市场</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        }
        .template-preview {
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .template-preview:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="mx-auto max-w-[393px] h-[852px] bg-white relative overflow-hidden rounded-[40px] shadow-2xl">
        <!-- Status Bar -->
        <div class="bg-white px-6 pt-3 pb-2">
            <div class="flex justify-between items-center text-xs">
                <span class="font-semibold">9:41</span>
                <div class="flex space-x-1">
                    <i class="fas fa-signal"></i>
                    <i class="fas fa-wifi"></i>
                    <i class="fas fa-battery-full"></i>
                </div>
            </div>
        </div>

        <!-- Header -->
        <div class="bg-gradient-to-r from-purple-600 to-indigo-600 px-4 py-3">
            <div class="flex items-center justify-between text-white">
                <a href="b2b-store-decoration.html" class="text-white">
                    <i class="fas fa-arrow-left text-lg"></i>
                </a>
                <h1 class="text-lg font-semibold">模板市场</h1>
                <button onclick="openPreview()" class="text-white hover:opacity-80">
                    <i class="fas fa-eye text-lg"></i>
                </button>
            </div>
        </div>

        <!-- Filter Bar -->
        <div class="bg-white border-b border-gray-200 px-4 py-3">
            <div class="flex items-center space-x-3 mb-3">
                <select id="categoryFilter" onchange="filterTemplates()" class="text-xs bg-gray-100 border border-gray-200 rounded px-2 py-1 flex-1">
                    <option value="">全部分类</option>
                    <option value="simple">简约风格</option>
                    <option value="fashion">时尚潮流</option>
                    <option value="business">商务专业</option>
                    <option value="holiday">节日特色</option>
                    <option value="luxury">奢华精品</option>
                </select>
                
                <select id="priceFilter" onchange="filterTemplates()" class="text-xs bg-gray-100 border border-gray-200 rounded px-2 py-1 flex-1">
                    <option value="">全部价格</option>
                    <option value="free">免费</option>
                    <option value="paid">付费</option>
                    <option value="vip">VIP专享</option>
                </select>
                
                <select id="sortFilter" onchange="filterTemplates()" class="text-xs bg-gray-100 border border-gray-200 rounded px-2 py-1 flex-1">
                    <option value="popular">最受欢迎</option>
                    <option value="newest">最新上线</option>
                    <option value="rating">评分最高</option>
                </select>
            </div>
        </div>

        <!-- Template Grid -->
        <div class="h-[calc(852px-180px)] overflow-y-auto pb-24" id="templateGrid">
            <!-- Featured Templates -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-purple-600 mr-2 rounded-full"></span>
                    精选推荐
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="template-preview bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-category="simple" data-price="free" onclick="selectTemplate('simple-modern', '简约现代', 'free')">
                        <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?w=200&h=120&fit=crop" 
                             alt="简约现代" class="w-full h-24 object-cover">
                        <div class="p-3">
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-sm font-medium">简约现代</p>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-500 text-xs mr-1"></i>
                                    <span class="text-xs text-gray-500">4.8</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mb-2">适合数码、家居类店铺</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">免费</span>
                                <span class="text-xs text-gray-400">使用: 12.5k</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="template-preview bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-category="fashion" data-price="free" onclick="selectTemplate('fashion-trend', '时尚潮流', 'free')">
                        <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=200&h=120&fit=crop" 
                             alt="时尚潮流" class="w-full h-24 object-cover">
                        <div class="p-3">
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-sm font-medium">时尚潮流</p>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-500 text-xs mr-1"></i>
                                    <span class="text-xs text-gray-500">4.9</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mb-2">适合服装、美妆类店铺</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-purple-600 bg-purple-100 px-2 py-1 rounded-full">免费</span>
                                <span class="text-xs text-gray-400">使用: 8.3k</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Premium Templates -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-orange-600 mr-2 rounded-full"></span>
                    高级模板
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="template-preview bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-category="business" data-price="paid" onclick="selectTemplate('business-pro', '商务专业', 'paid')">
                        <img src="https://images.unsplash.com/photo-1555529669-e69e7aa0ba9a?w=200&h=120&fit=crop" 
                             alt="商务专业" class="w-full h-24 object-cover">
                        <div class="p-3">
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-sm font-medium">商务专业</p>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-500 text-xs mr-1"></i>
                                    <span class="text-xs text-gray-500">4.7</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mb-2">适合B2B、企业服务</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-orange-600 bg-orange-100 px-2 py-1 rounded-full">¥99</span>
                                <span class="text-xs text-gray-400">使用: 3.2k</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="template-preview bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-category="luxury" data-price="vip" onclick="selectTemplate('luxury-gold', '奢华金典', 'vip')">
                        <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=200&h=120&fit=crop" 
                             alt="奢华金典" class="w-full h-24 object-cover">
                        <div class="p-3">
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-sm font-medium">奢华金典</p>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-500 text-xs mr-1"></i>
                                    <span class="text-xs text-gray-500">5.0</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mb-2">适合奢侈品、珠宝类</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-purple-600 bg-purple-100 px-2 py-1 rounded-full">VIP专享</span>
                                <span class="text-xs text-gray-400">使用: 856</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Holiday Templates -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-red-600 mr-2 rounded-full"></span>
                    节日专题
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="template-preview bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-category="holiday" data-price="free" onclick="selectTemplate('spring-festival', '春节喜庆', 'free')">
                        <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=200&h=120&fit=crop" 
                             alt="春节喜庆" class="w-full h-24 object-cover">
                        <div class="p-3">
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-sm font-medium">春节喜庆</p>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-500 text-xs mr-1"></i>
                                    <span class="text-xs text-gray-500">4.6</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mb-2">春节期间限时使用</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">限时免费</span>
                                <span class="text-xs text-gray-400">使用: 5.8k</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="template-preview bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-category="holiday" data-price="free" onclick="selectTemplate('double-eleven', '双11狂欢', 'free')">
                        <img src="https://images.unsplash.com/photo-1556740758-90de374c12ad?w=200&h=120&fit=crop" 
                             alt="双11狂欢" class="w-full h-24 object-cover">
                        <div class="p-3">
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-sm font-medium">双11狂欢</p>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-500 text-xs mr-1"></i>
                                    <span class="text-xs text-gray-500">4.8</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mb-2">双11活动专用模板</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">限时免费</span>
                                <span class="text-xs text-gray-400">使用: 15.2k</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- More Templates -->
            <div class="p-4">
                <h3 class="font-semibold mb-3 flex items-center">
                    <span class="w-1 h-4 bg-green-600 mr-2 rounded-full"></span>
                    更多选择
                </h3>
                <div class="grid grid-cols-2 gap-3">
                    <div class="template-preview bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-category="simple" data-price="free" onclick="selectTemplate('minimalist', '极简主义', 'free')">
                        <img src="https://images.unsplash.com/photo-1441986300917-64674bd600d8?w=200&h=120&fit=crop" 
                             alt="极简主义" class="w-full h-24 object-cover">
                        <div class="p-3">
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-sm font-medium">极简主义</p>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-500 text-xs mr-1"></i>
                                    <span class="text-xs text-gray-500">4.5</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mb-2">简洁大方，突出商品</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-green-600 bg-green-100 px-2 py-1 rounded-full">免费</span>
                                <span class="text-xs text-gray-400">使用: 6.7k</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="template-preview bg-white rounded-lg border border-gray-200 overflow-hidden cursor-pointer" data-category="fashion" data-price="paid" onclick="selectTemplate('vintage-style', '复古风尚', 'paid')">
                        <img src="https://images.unsplash.com/photo-1578662996442-48f60103fc96?w=200&h=120&fit=crop" 
                             alt="复古风尚" class="w-full h-24 object-cover">
                        <div class="p-3">
                            <div class="flex items-center justify-between mb-1">
                                <p class="text-sm font-medium">复古风尚</p>
                                <div class="flex items-center">
                                    <i class="fas fa-star text-yellow-500 text-xs mr-1"></i>
                                    <span class="text-xs text-gray-500">4.4</span>
                                </div>
                            </div>
                            <p class="text-xs text-gray-500 mb-2">复古色调，文艺气息</p>
                            <div class="flex items-center justify-between">
                                <span class="text-xs text-orange-600 bg-orange-100 px-2 py-1 rounded-full">¥68</span>
                                <span class="text-xs text-gray-400">使用: 2.1k</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Template selection and filtering
        function selectTemplate(templateId, templateName, priceType) {
            if (priceType === 'vip') {
                if (!confirm(`使用"${templateName}"模板需要VIP会员权限。\n\n是否立即开通VIP会员？`)) {
                    return;
                }
                showToast('正在跳转到VIP开通页面...');
                setTimeout(() => {
                    showToast('功能开发中，敬请期待');
                }, 1500);
                return;
            }
            
            if (priceType === 'paid') {
                if (!confirm(`使用"${templateName}"模板需要支付费用。\n\n确认购买此模板吗？`)) {
                    return;
                }
                showToast('正在处理支付...');
                setTimeout(() => {
                    showToast('支付成功，模板已添加到您的收藏');
                    setTimeout(() => {
                        applyTemplate(templateId, templateName);
                    }, 1000);
                }, 2000);
                return;
            }
            
            // Free template
            if (confirm(`确认使用"${templateName}"模板？\n\n应用后将替换当前店铺模板。`)) {
                applyTemplate(templateId, templateName);
            }
        }

        function applyTemplate(templateId, templateName) {
            showToast(`正在应用"${templateName}"模板...`);
            
            setTimeout(() => {
                showToast('模板应用成功！');
                setTimeout(() => {
                    window.location.href = 'b2b-store-decoration.html';
                }, 1000);
            }, 2000);
        }

        function filterTemplates() {
            const categoryFilter = document.getElementById('categoryFilter').value;
            const priceFilter = document.getElementById('priceFilter').value;
            const sortFilter = document.getElementById('sortFilter').value;
            
            showToast('正在筛选模板...');
            
            const templates = document.querySelectorAll('.template-preview');
            let visibleCount = 0;
            
            templates.forEach(template => {
                let shouldShow = true;
                
                // Category filter
                if (categoryFilter && !template.dataset.category.includes(categoryFilter)) {
                    shouldShow = false;
                }
                
                // Price filter
                if (priceFilter && !template.dataset.price.includes(priceFilter)) {
                    shouldShow = false;
                }
                
                template.style.display = shouldShow ? 'block' : 'none';
                if (shouldShow) visibleCount++;
            });
            
            setTimeout(() => {
                showToast(`找到 ${visibleCount} 个匹配模板`);
            }, 500);
        }

        function openPreview() {
            showToast('预览功能开发中，敬请期待');
        }

        // Toast notification
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg text-sm z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // Initialize page
        document.addEventListener('DOMContentLoaded', function() {
            showToast('模板市场已加载');
        });
    </script>
</body>
</html>